<template>
  <div class="bg-white px-3">
    <el-tabs v-model="tabIndex" @tab-click="handleClick">
      <el-tab-pane v-for="(item,index) in tabbars" :key="index" :label="item.name">
        <!-- 搜索栏 -->
        <button-search ref="buttonSearch" placeholder="要搜索的商品名称" @search="handlerSearch">
          <template #left>
            <router-link :to="{name:'shop_goods_create'}">
              <el-button type="success" size="mini">发布商品</el-button>
            </router-link>
            <el-button type="warning" size="mini" class="ml-2">恢复商品</el-button>
            <el-button type="danger" size="mini" v-show="multipleSelection.length" @click="del({all:true})">批量删除</el-button>
            <el-button size="mini">上架</el-button>
            <el-button size="mini">下架</el-button>
            <el-button size="mini">推荐</el-button>
          </template>

          <template #form>
            <el-form inline ref="form" :model="form" label-width="80px">
              <el-form-item label="商品名称" class="mb-0">
                <el-input v-model="form.name" size="mini" placeholder="商品名称"></el-input>
              </el-form-item>
              <el-form-item label="商品编码" class="mb-0">
                <el-input v-model="form.code" size="mini" placeholder="商品编码"></el-input>
              </el-form-item>
              <el-form-item label="商品类型" class="mb-0">
                <el-select v-model="form.type" placeholder="请选择" size="mini">
                  <el-option label="北京" value="beijing"></el-option>
                  <el-option label="上海" value="shanghai"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="商品分类" class="mb-0">
                <el-input v-model="form.category" size="mini" placeholder="商品分类"></el-input>
              </el-form-item>
              <el-form-item class="mb-0">
                <el-button size="mini" type="info" @click="handlerSearch">搜索</el-button>
                <el-button size="mini" @click="clearSearch">清空</el-button>
              </el-form-item>
            </el-form>
          </template>
        </button-search>

        <!-- 商品列表 -->
        <!--
                    商品
                        图片 http://static.yoshop.xany6.com/2018071718294208f086786.jpg
                        名称 荣耀 V10全网通 标配版 4GB+64GB 魅丽红 
                        时间	 2019-07-17 18:34:14
                        分类  手机
                    商品类型（普通商品）	
                    实际销量（20）
                    商品排序（100）
                    商品状态（上架）
                    总库存（200）
                    价格(元)（1000.00）
				 -->
        <el-table class="mt-3" style="width: 100%" :data="tableData[index].list" border @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="45" align="center"></el-table-column>
          <el-table-column label="商品" width="380">
            <template slot-scope="scope">
              <div class="media">
                <el-image :src="scope.row.cover" style="width:60px;height:60px" class="align-self-start mr-3" :preview-src-list="[scope.row.cover]"></el-image>
                <div class="media-body">
                  <p class="mb-1 font-weight-bold">{{scope.row.title}}</p>
                  <p class="mb-1">分类:{{scope.row.category}}</p>
                  <p class="mb-0">时间:{{scope.row.create_time}}</p>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="type" label="商品类型" align="center"></el-table-column>
          <el-table-column prop="sale_count" label="实际销量" align="center"></el-table-column>
          <el-table-column prop="order" label="商品排序" align="center"></el-table-column>
          <el-table-column label="商品状态" align="center">
            <template slot-scope="scope">
              <el-button :type=" scope.row.status===1?'success':'danger' " size="mini" @click="changeStatus(scope.row)">
                {{scope.row.status===1?'上架':'下架'}}
              </el-button>
            </template>
          </el-table-column>
          <el-table-column prop="stock" label="总库存" align="center"></el-table-column>
          <el-table-column prop="pprice" label="价格(元)" align="center"></el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button-group>
                <el-button type="primary" size="mini" plain>修改</el-button>
                <el-button type="danger" size="mini" plain @click="del({index:scope.$index})">删除</el-button>
              </el-button-group>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div style="height:70px"></div>
        <el-footer class="border-top d-flex align-items-center px-0 bg-white" style="position: fixed;bottom: 0;left: 240px;right: 0;z-index: 100;">
          <div class="pl-2" style="flex:1">
            <el-pagination :current-page="tableData[index].currentPage" :page-sizes="page.sizes" :page-size="page.size" layout="total, sizes, prev, pager, next, jumper" :total="page.total">
            </el-pagination>
          </div>
        </el-footer>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import buttonSearch from "@/components/shop/button-search";
import tableMixin from "../../../common/mixins/tableMixin";
export default {
  mixins: [tableMixin],
  components: {
    buttonSearch
  },
  data() {
    return {
      tabIndex: 0,
      tabbars: [
        { name: "审核中" },
        { name: "出售中" },
        { name: "已下架" },
        { name: "库存预警" },
        { name: "回收站" }
      ],
      form: {
        name: "", // 商品名称
        code: "",
        type: "",
        category: ""
      },
      requestUrl: "" //请求的地址
    };
  },
  created() {},
  methods: {
    // 加载事件
    handleClick(tab, event) {
      this.tabIndex = tab.index;
    },
    // 搜索
    handlerSearch(e) {
      // 简单搜索
      if (typeof e === "string") {
        return console.log("简单搜索", e);
      }
      // 高级搜索
      console.log("搜索事件");
    },
    // 清空
    clearSearch() {
      this.form = {
        name: "",
        code: "",
        type: "",
        category: ""
      };
      this.$refs.buttonSearch[this.tabIndex].closeSuperSearch();
    }
  }
};
</script>

<style lang="scss" scoped>
</style>